<template>
  <div ref="entityGraph"
       class="charts chart-graph"
       :style="{height:height+'px'}"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from '@/components/charts/theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
    name: 'entityGraph',
    data () {
        return {
            chart_dom: ''
        }
    },
    props: {
        data: Array,
        links: Array,
        height: {
            type: Number,
            default: 400
        }
    },
    mounted () {
        this.init()
    },
    watch: {
        links: function (val, oldVal) {
            this.init()
        }
    },
    methods: {
        init () {
            this.chart_dom = echarts.init(this.$refs.entityGraph, 'tdTheme')
            let option = {
                animationDurationUpdate: 1500,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} '
                },
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        force: {
                            gravity: 0.05,
                            edgeLength: 320,
                            repulsion: 300
                        },
                        top: 56,
                        symbolSize: 80,
                        draggable: true,
                        focusNodeAdjacency: true,
                        tooltip: {
                            formatter: function (params) {
                                if (params.data.name) {
                                    // 节点的名称
                                    return params.data.name
                                } else {
                                    // 边的名称
                                    return params.data.value
                                }
                            }
                        },
                        label: {
                            normal: {
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: '#fff',
                                borderWidth: 1,
                                shadowBlur: 10,
                                shadowColor: 'rgba(0, 0, 0, 0.3)'
                            }
                        },
                        edgeSymbol: ['circle', 'arrow'],
                        edgeSymbolSize: [4, 10],
                        edgeLabel: {
                            normal: {
                                textStyle: {
                                    fontSize: 20
                                }
                            }
                        },
                        data: this.data,
                        // links: [],
                        links: this.links,
                        roam: true,
                        emphasis: {
                            lineStyle: {
                                width: 5
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: 'source',
                                curveness: 0.3
                            }
                        }

                    }
                ]
            }

            this.chart_dom.setOption(option)
            this.chart_dom.on('click', { dataType: 'node' }, params => {
                let param = params.data
                if (param.rowkey && param.label.fontSize !== 16) {
                    this.viewObjectInfo(param.objectType, param.rowkey, param.objectUri, param.category, param.displayName, param.icon, param.belongGroup)
                }
            })
        },
        // 对象查看
        viewObjectInfo (objectType, instanceUri, objectUri, name, displayName, icon, belongGroup) {
            let currentUrl = window.location.href
            currentUrl = currentUrl.split('#')[0]
            currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${displayName}&icon=${icon}&name=${name}&belongGroup=${belongGroup}`
            // let a = document.createElement('a')
            // a.setAttribute('href', currentUrl)
            // a.setAttribute('target', '_blank')
            // a.setAttribute('id', instanceUri)
            // // 防止反复添加
            // if (!document.getElementById(instanceUri)) {
            //     document.body.appendChild(a)
            // }
            // a.click()
            window.open(currentUrl, '')
        }
    }
}
</script>

<style lang="less">
</style>
